<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload Test</title>
</head>
<body>
    <div>
        <input type="file" name="file" onchange="uploadFile(this);"/>
    </div>
    <div>
        <pre id="ret-content"></pre>
    </div>
    
</body>
<script>
    function uploadFile(t){
        //一切HTML标签中的东西都有对应接口功能

        if(t.files.length <= 0)
        return;

        let fm = new FormData();

        fm.append('file',t.files[0]);

        fetch('/upload',{//httpserv.js用data;app.js用upload
            method:'POST',
            body:fm
        })
        .then(res =>{
            if(res.ok){
                return res.text();
            }
            throw new Error(`${res.status}${res.statusText}`)
        })
        .then(text=>{
            // document.getElementById('ret-content').innerHTML = text
            let d = document.getElementById('ret-content');
            d.innerHTML = `<img src='/image/${text}' style='width:80%;height:auto;'> `;
            //src=>浏览器自动发起get请求:因为有对应处理过程，返回图片处理数据
            //src的路径：路由设计，后端设计好
            
        })
        .catch(err => {
                console.error(err.message);
            })
        }
    </script>
</body>

</html>